@import "_config.scss";
@import "_mixins.scss";
@import "reset.scss";

$slideNumber:5;

.fade-slider{
	position:relative;
	width:100%;
	padding-bottom:percentage(832px / 1920px);
	overflow:hidden;
	
	.fade-slides{
		position: absolute;
		height: 100%;
		width: 100%;

		.fade-slider-list{
			position: absolute;
			height:100%;
			width: 100%;
			display:block;
			top:0px;
			left:0px;

			@for $i from 1 through $slideNumber{
				&:nth-of-type(#{$i}){
					z-index: $slideNumber - $i;
				}
			}

			a{
				display:block;
				width: 100%;
    			height: 100%;
				@extend %clearfix;
			}

			.fade-slider-item{
				position: relative;
				width: 100%;
				height: 100%;

				.fade-item-content{
					position:absolute;
					width: 100%;
					height: 100%;
					left:0px;
					top:0px;

					h3.title{
						font-weight: bold;
						text-align:left;
						font-size: 48px;
						line-height: 58px;
						
						@include respond-to('pad'){
							font-size: 48px;
							line-height: 58px;
							margin: 40px 0 0 30px;
						}
						@include respond-to('small'){
							font-size: 48px;
							line-height: 58px;
							margin: 40px 0 0 30px;
						}
						@include respond-to('medium'){
							font-size: 48px;
							line-height: 58px;
							margin: 40px 0 0 30px;
						}
						@include respond-to('large'){
							font-size: 96px;
							line-height: 115px;
							margin: 80px 0 0 70px;
						}
						@include respond-to('huge'){
							font-size: 96px;
							line-height: 115px;
							margin: 80px 0 0 70px;
						}
					}
					.line2{
						font-size: 18px;
						line-height: 24px;
						text-align:left;
						
						@include respond-to('pad'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('small'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('medium'){
							font-size: 18px;
							line-height: 24px;
							margin: 18px 0 0 30px;
						}
						@include respond-to('large'){
							font-size: 24px;
							line-height: 36px;
							margin: 24px 0 0 70px;
						}
						@include respond-to('huge'){
							font-size: 24px;
							line-height: 36px;
							margin: 24px 0 0 70px;
						}
					}
					
					.black-button{
						background: #1A1A1A;
						color:#ffffff;
					}
						
					.white-button{
						background: #ffffff;
						color:#1A1A1A;
					}
					
					.info-link{
						height:36px;
						width:86px;
						border-radius: 2px;
						text-align:center;
						cursor:pointer;

						&:hover{
							opacity:0.85;
						}
						
						@include respond-to('pad'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('small'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('medium'){
							height:36px;
							width:86px;
							margin: 24px 0 0 30px;
						}
						@include respond-to('large'){
							height:48px;
							width:112px;
							margin: 36px 0 0 70px;
						}
						@include respond-to('huge'){
							height:48px;
							width:112px;
							margin: 36px 0 0 70px;
						}
					}
					
					.knowMore{
						font-size:14px;
						line-height:36px;
						
						@include respond-to('pad'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('small'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('medium'){
							font-size:14px;
							line-height:36px;
						}
						@include respond-to('large'){
							font-size:18px;
							line-height:48px;
						}
						@include respond-to('huge'){
							font-size:18px;
							line-height:48px;
						}
					}
						
					.white-ground {
						color:#1A1A1A;
					}
						
					.black-ground {
						color:#ffffff;
					}
				}
			}
		}
	}
	
	.fade-slider-btn{
		position:absolute;
		top:50%;
		margin-top:-40px;
		width:60px;
		height:80px;
		cursor: pointer;
	
		&.fade-slider-prev {
			left: 0;
			opacity:1;
			background-image:url(../images/prev.png);
			z-index: 99;
			visibility:hidden;
			
			&:hover{
				opacity:0.5;
			}
		}
		
		&.fade-slider-next {
			right: 0;
			opacity:1;
			background-image:url(../images/next.png);
			z-index: 99;
			visibility:hidden;
			
			&:hover{
				opacity:0.5;
			}
		}
	}
	
	.fade-slider-ctrl {
        position: absolute;
        left: 50%;
		bottom:30px;
		z-index: 99;
		
		span {
			box-sizing: border-box;
			float: left;
			margin-right: 16px;
			width: 10px;
			height: 10px;
			border: 1px solid #ababab;
			border-radius: 6px;
			background-color: #ababab;
			cursor: pointer;
		}
		
		.active {
			background-color: #ffffff;
			border:1px solid #ababab;
		}
    }
}